<template>
  <div class="monitor" :style="clieHeight">
    <van-nav-bar title="实时监测" @click-left="onClickLeft" :border="border">
      <template #left>
        <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="icon"
            name="fanhui"
            size="18"
        />
      </template>
    </van-nav-bar>
    <div class="mon_body">
      <p class="mon_body_p">{{ currentWd }}</p>
      <equipment :shuju="wenshishuju"></equipment>
      <jpw :shuju="jpwshuju"></jpw>
      <ups :shuju="upsshuju"></ups>
      <hongwai :shuju="hongwai"></hongwai>
      <yangan :shuju="yanwu"></yangan>
      <shuijin :shuju="feidingwei"></shuijin>
    </div>
    <!-- <p>没有更多了</p> -->
    <tabbar :active="2"></tabbar>
  </div>
</template>
<script>
import tabbar from "../comment/tabbar";
import equipment from "../comment/equipment";
import jpw from "../comment/jpw";
import ups from "../comment/ups";
import hongwai from "../comment/hongwai";
import yangan from "../comment/yangan";
import shuijin from "../comment/shuijin";
export default {
  data: () => ({
    border: false,
    clieHeight: "",
    hostId: "",
    sersorList: [],
    needJK: [],
    wenshishuju: [],
    jpwshuju: [],
    upsshuju: [],
    hongwai: [],
    yanwu: [],
    feidingwei: [],
    xudianchi: [],
    shishigx: null,
    currentWd: JSON.parse(localStorage.getItem("currentwd")),
  }),
  created() {
    this.getHeight();
    this.getAnyEquipment();
  },
  methods: {
    getHeight() {
      this.clieHeight = `min-height:${window.innerHeight}px`;
    },
    onClickLeft() {
      this.$router.push("/home");
    },
    //获取需要监测设备的名字和设备类型
    getAnyEquipment() {
      this.$axios
          .post("/android/getSensors", {
            userId: `${JSON.parse(localStorage.getItem("users") || "[]").id}`,
            roomId: `${JSON.parse(localStorage.getItem("currentid"))}`,
          })
          .then((res) => {
            if (res.status === 200) {
              let { data } = res;
              this.hostId = data.data[0].hostId;
              this.sersorList = data.data[0].sensors;
              this.getEquipmentInfo();
            } else {
              console.log(res.statusText);
            }
          });
    },
    //获取需要监控的设备的id号
    getEquipmentInfo() {
      // let list=[];
      this.sersorList.forEach((el) => {
        let parm = {
          userId: "1",
          hostId: `${this.hostId}`,
          sensorType: `${el.sensorType}`,
        };
        //获取温湿度传感 id
        if (el.sensorType === "17") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getWenDu(res.data.deviceList);
          });
        }
        //获取ups id
        if (el.sensorType === "18") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getUps(res.data.deviceList);
          });
        }
        //获取红外探测id
        if (el.sensorType === "19") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getHongWai(res.data.deviceList);
          });
        }
        //获取烟雾报警id
        if (el.sensorType === "20") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getYanWu(res.data.deviceList);
          });
        }
        //获取非定位漏水id
        if (el.sensorType === "24") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getFeiDingWei(res.data.deviceList);
          });
        }
        //获取电量id
        if (el.sensorType === "341") {
          this.$axios.post("/android/getDeviceList", parm).then((res) => {
            this.getDiangLiang(res.data.deviceList);
          });
        }
      });
    },
    //获取温度检测数据
    getWenDu(arr) {
      let wenshidu_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getAirMonitorDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              wenshidu_param.push(data);
              this.wenshishuju = wenshidu_param;
            });
      });
    },
    //获取ups数据
    getUps(arr) {
      let upsshuju_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getUPSMonitorDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              upsshuju_param.push(data);
              this.upsshuju = upsshuju_param;
            });
      });
    },
    //获取红外探测数据
    getHongWai(arr) {
      let hongwai_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getInfraredMonitorDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              hongwai_param.push(data);
              this.hongwai = hongwai_param;
            });
      });
    },
    //获取烟雾报警数据
    getYanWu(arr) {
      let yanwu_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getSmokeMonitorDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              yanwu_param.push(data);
              this.yanwu = yanwu_param;
            });
      });
    },
    //获取非定位漏水数据
    getFeiDingWei(arr) {
      let feidingwei_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getWaterMonitorDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              feidingwei_param.push(data);
              this.feidingwei = feidingwei_param;
            });
      });
    },
    //获取电量数据
    getDiangLiang(arr) {
      let jpwshuju_param = [];
      arr.forEach((el) => {
        this.$axios
            .post("/android/getElectricityDataNow", { deviceId: el.id })
            .then((res) => {
              let { data } = res;
              let param = data;
              param.name = el.deviceName;
              jpwshuju_param.push(data);
              this.jpwshuju = jpwshuju_param;
            });
      });
    },
    //定时器
    shishiGx() {
      this.shishigx = setInterval(() => {
        this.getEquipmentInfo();
      }, 50000);
    },
  },
  mounted() {
    //开启定时器
    this.shishiGx();
  },
  components: { tabbar, equipment, jpw, ups, hongwai, yangan, shuijin },
};
</script>
<style lang="less">
.monitor {
  overflow-y: auto;
  background-color: #f5f8fa;
  .monitor_img {
    .icon {
      width: 10.667vw;
      height: 10.667vw;
    }
  }
  .van-nav-bar {
    background-color: #f2f2f2;
    height: 11.733vw;
    .van-nav-bar__left {
      .icon-fanhui {
        height: 11.733vw;
        width: 4.267vw;
      }
      .icon-fanhui::before {
        font-size: 4.267vw;
        line-height: 11.733vw;
      }
    }
    .van-nav-bar__title van-ellipsis {
      color: #333333;
    }
  }
  .mon_body {
    padding: 4.133vw 5.067vw 0 5.067vw;
    box-sizing: border-box;
    .mon_body_p {
      font-size: 4.8vw;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0vw;
      color: #333333;
      margin-bottom: 3.467vw;
    }
    .ul_li {
      margin-bottom: 1.333vw;
    }
    .monitor_li {
      display: flex;
      background-color: #fff;
      border-radius: 2.667vw;
      padding: 4vw 0 4vw 4vw;
      .monitor_img {
        padding-top: 2.667vw;
        box-sizing: border-box;
        img {
          width: 10.667vw;
          height: 10.667vw;
          border-radius: 50%;
        }
      }
      .equipment {
        flex: 1;
        margin-left: 4vw;
        .equipment_name {
          display: flex;
          border-bottom: 1px solid #c5cfd6;
          font-size: 3.733vw;
          height: 7.733vw;
          justify-content: space-between;
          padding-right: 2.667vw;
          box-sizing: border-box;
          color: #333333;
          margin-bottom: 3.867vw;
          .more_equipment {
            color: #999999;
          }
        }
      }
      p {
        display: flex;
        justify-content: space-between;
        padding-right: 2.533vw;
        align-items: center;
        font-size: 3.2vw;
        box-sizing: border-box;
        color: #666666;
        margin-bottom: 2.667vw;
        .equipment_state {
          display: inline-block;
          width: 1.867vw;
          height: 1.867vw;
          background-color: #43f55c;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>